<template>
  <div class="container-xl bg-white p-5" :style="{ minHeight: '80vh' }">
    <div class="row">
      <div class="col">
        <h4>题单列表</h4>
      </div>
      <div class="col text-right">
        <router-link custom :to="{ name: '修改我的专题', params: { ID: 0 } }" v-slot="{ navigate }">
          <el-button @click="navigate" size="default">+ 创建我的专题</el-button>
        </router-link>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <table class="table table-borderless table-hover">
          <thead class="border-bottom thead">
            <tr>
              <td width="80">编号</td>
              <td scope="col">题单</td>
              <td width="300">标签</td>
              <td width="80">题目数</td>
              <td width="200" class="text-center">操作</td>
            </tr>
          </thead>
          <tbody>
            <router-link custom :to="{ name: '题库列表', params: { ID: v.ID } }" v-for="(v, key) in getquestionbank"
              :key="key" v-slot="{ navigate }">
              <tr class="cu" @click="navigate">
                <td>{{ v.ID }}</td>
                <td>
                  <span v-text="v.name"></span>
                </td>
                <td></td>
                <td class="" v-text="v.questionquestionbank?.length"></td>
                <td class="text-right">
                  <router-link custom :to="{ name: '修改我的专题', params: { ID: v.ID } }" v-slot="{ navigate }">
                    <el-button size="default" @click.stop="navigate">编辑</el-button>
                  </router-link>
                  <el-button size="default" @click.stop="del(v.ID)">删除</el-button>
                </td>
              </tr>
            </router-link>
          </tbody>
        </table>
      </div>
    </div>
    <div class="row">
      <div class="col text-right">
        <el-pagination :page-size="limit" :total="totalCount" @current-change="change" layout="total,prev, pager, next"
          :current-page="Math.floor(offset / limit) + 1"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { computed, onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Iobj, asyncdelquestionbank, asyncgetmyquestionbank } from "../../../api";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { Storekey } from "../../../interface";
import { useStore } from "vuex";
defineProps<{ user: Studycodemodel.Iuser }>()
type K = keyof Studycodemodel.Iquestionbank;
type Iroue = {
  order?: K;
  offset?: number;
  limit?: number;
};

const store = useStore(Storekey)
const user = computed<Studycodemodel.Iuser>(() => {
  return store.getters.getuser;
});
const teamId = computed(() => {
  return user.value?.teamid
})

const route = useRoute();
const router = useRouter();

const getquestionbank = ref<Studycodemodel.Iquestionbank[]>([]);
const totalCount = ref(0);

const routeQuery = computed(() => {
  return route.query as Iroue;
});
watch(() => routeQuery.value, () => {
  start();
});

const order = computed(() => {
  return routeQuery.value.order || "ID";
});
const offset = computed(() => {
  return Number(routeQuery.value.offset) || 0;
});
const limit = computed(() => {
  return Number(routeQuery.value.limit) || 20;
});

const like = ref("");

async function start() {
  const Iobj: Iobj<Studycodemodel.Iquestionbank> = {
    _limit: limit.value,
    _order: order.value,
    _offset: offset.value,
  };
  if (like.value) {
    Object.assign(Iobj, {
      _like: ["name", like.value],
    });
  }
  const { rows, count } = await asyncgetmyquestionbank(Object.assign(Iobj));
  totalCount.value = count;
  getquestionbank.value = rows;
}

onMounted(() => {
  start();
});

async function del(ID?: number) {
  if (ID) {
    ElMessageBox.confirm("你确定要删除此题吗", "提示").then(async () => {
      try {
        await asyncdelquestionbank({ ID });
        ElMessage.success("删除成功");
        start();
      } catch (e: any) {
        ElMessage.error(e);
      }
    });
  }
}

function change(r: number) {
  router.push({
    name: "我的题单",
    query: {
      limit: limit.value,
      order: order.value,
      offset: (r - 1) * limit.value,
    },
  });
}

</script>

<style scoped>
.bg {
  background-color: #f2f2f2;
}

.text-x {
  cursor: pointer;
}

tr {
  line-height: 32px;
}

.containermain {
  padding-bottom: 25px;
  margin-bottom: 40px;
  padding-top: 40px;
  margin-top: 25px;
}

button {
  margin-left: 10px;
}

tr {
  line-height: 56px;
}

td {
  padding: 0 !important;
}
</style>
